<template>
    <div class="list">
        <ul>
            <!-- .prevent 阻止默认行为-->
            <li class="item"
            v-for="item of letters" 
            :key="item"
            :ref="item"
            @touchstart.prevent="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            @click="handleLetterClick"
            >
                {{item}}
            </li>
        </ul>
    </div>
 
</template>

<script>
export default{
    name: 'CityAlphabet',
    props: {
        cities: Object
    },
    computed: {
        //将接受的cities object的属性转为数组
        letters () {
            const letters= []
                 console.log(this.cities);
            for(let i in this.cities) {
                letters.push(i)
            }
            return letters
        }
    },
    methods: {
        handleLetterClick (e) {
            //子组件返回数据给父组件
            this.$emit('change',e.target.innerText)
        },
        //手指滑动事件开始
        handleTouchStart () {
            this.touchStatus=true
        },
        //手指滑动事件中
        handleTouchMove (e) {
            if(this.touchStatus){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                //限流操作， 延迟16毫秒中再触发滑动事件，假如在16毫秒之前还在滑动，会清除以下的代码块，直到16毫秒过后才执行
                this.timer = setTimeout(()=>{
                    //接受当前e的事件中 touch移动属性中的clientY，距离手指最顶部不是div ,79是顶部到div的高度
                    const touchY = e.touches[0].clientY - 79
                    //计算手指当前滑到的位置下标  (？-A)/20 每个字母的高度20 ,再向下取整数
                    const index =Math.floor((touchY- this.startY) /20)
                    //否则会滑动过程中会溢出index，导致数组报错
                    if(index >= 0 && index < this.letters.length){
                        this.$emit('change',this.letters[index])
                    }
                },16)
            }
        },
        //手指滑动事件关闭
        handleTouchEnd () {
            this.touchStatus= false
        }
    },
    data () {
        return {
            touchStatus : false,
            startY: 0,
            timer: null
        }
    },
    updated (){
        //A 作为开始值，算出当前高度  offsetTop是距离当前的div最高点
        this.startY = this.$refs['A'][0].offsetTop
    }

}  
</script>

<style lang="stylus" scoped>
    @import  '~styles/varibles.styl'
    .list
        //垂直居中
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute
        top: 1.58rem 
        right: 0
        bottom: 0
        width: .4rem 
        .item
            line-height: .4rem 
            text-align: center
            color: $bgColor
</style>